<template>
  <div class="title">我的订单</div>
  <div class="orderList">
    <ul>
      <li v-for="(order, index) in pageInfo.list" :key="index">
        <!-- 头部 -->
        <div class="header">
          <div class="orderId">订单ID: {{ order.id }}</div>
          <div class="addrDetail">地址: {{ order.addrDetail }}</div>
        </div>
        <!-- 详情、状态 -->
        <div class="orderDetail">
          <el-row>
            <!-- 商品信息 -->
            <el-col :span="16">
              <div class="goodsInfo" v-for="(orderDetail, index) in order.orderDetails" :key="index">
                <el-row>
                  <el-col :span="3">
                    <!-- 图片 -->
                    <el-image
                        fit="contain"
                        style="width: 50px; height: 50px;"
                        :src="`${SERVER_ADDR}/goods/pic/${orderDetail.goods.picList[0].url}`"/>
                  </el-col>
                  <el-col :span="19" style="font-size: 14px;">
                    <!-- 商品信息 -->
                    {{ orderDetail.goods.name }} {{ orderDetail.goods.color }} {{ orderDetail.goods.version }}
                    {{ orderDetail.price }}×{{ orderDetail.goods.count }}
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <!-- 状态、操作 -->
            <el-col :span="8">
              <div v-if="order.status == 0">
                <el-button type="warning" @click="toPayPage(order.id)">立即付款</el-button>
              </div>

              <div v-else-if="order.status == 2">
                <el-popconfirm
                    width="220"
                    :icon="InfoFilled"
                    icon-color="#626AEF"
                    title="确认已收货？"
                >
                  <template #reference>
                    <el-button type="success">已收货</el-button>
                  </template>
                  <template #actions="{ confirm, cancel }">
                    <el-button size="small" @click="cancel">取消</el-button>
                    <el-button
                        type="danger"
                        size="small"
                        @click="received(order.id)"
                    >
                      确认
                    </el-button>
                  </template>
                </el-popconfirm>

              </div>
              <div v-else>
                {{ ["未支付", "已支付", "已发货", "已收货", "退货退款", "退换货", "仅退款", "售后", "其他"][order.status] }}
              </div>
            </el-col>
          </el-row>
        </div>
      </li>
    </ul>
  </div>
  <div class="pageNav">
    <el-row justify="center">
      <el-pagination background layout="prev, pager, next"
                     v-model:current-page="pageInfo.pageNum"
                     :page-count="pageInfo.pages"
                     @update:current-page="selectByUser"/>
    </el-row>
  </div>
</template>

<script setup>
//查询当前用户的订单信息
import orderApi from "@/api/orderApi.js";
import {ref} from "vue";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";
import {InfoFilled} from "@element-plus/icons-vue";

const router = useRouter();

//服务器路径
const SERVER_ADDR = ref(import.meta.env.VITE_SERVER_ADDR);


//分页信息
const pageInfo = ref({
  pages: 0,
  pageSize: 0,
  pageNum: 0
});

function toPayPage(id) {
  router.push({
    path: '/user/pay',
    query: {
      orderId: id
    }
  });
}

//用户确认收货
function received(id) {
  orderApi.received(id)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success(resp.msg);
          selectByUser(1);
        } else {
          ElMessage.error(resp.msg);
        }
      });
}

function selectByUser(pageNum) {
  orderApi.selectByUser(pageNum, 5)
      .then(resp => {
        if (resp.code == 10000) {
          pageInfo.value = resp.data;
        } else {
          ElMessage.error(resp.msg);

        }
      });
}

selectByUser(1);
</script>

<style scoped>
.title {
  font-weight: bold;
  font-size: 18px;
}

.orderList, .pageNav {
  margin: 10px 0;
  padding: 20px;
  border: 1px solid #222;
  background-color: #FFF;
}

.orderList ul li {
  border: 1px solid black;
  margin-bottom: 10px;
  padding: 10px;
}

.orderList ul li .header {
  border-bottom: 1px solid black;
}

.orderList ul li .orderDetail {
  margin-top: 10px;
}

.orderList ul li .orderDetail .goodsInfo {
  margin-bottom: 10px;
  height: 50px;
  line-height: 50px;
}

.orderList ul li .header .orderId {
  font-size: 14px;
  color: #222;
}

.orderList ul li .header .addrDetail {
  font-size: 14px;
  color: var(--theme-color);
}
</style>